<template>
  <div class="login-container">
    <img class="logo-image" src="../../../perm/assets/login-left.png"/>
    <div class="logo-tip">
      你的线上营销服务部
    </div>
    <div class="mid-card">
      <div class="left-red">
        <img class="logo-left-image" src="../../../perm/assets/loginpic.jpg"/>
      </div>
      <!--登录弹窗-->
      <a-form-model
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 24 }"
        class="login-form"
        :class="{hide: registryModeOn||resetPassword}"
        labelAlign="left">
        <div class="title-container">
          用户登录
        </div>

        <a-form-model-item prop="username">
          <a-input
            ref="username"
            v-model="loginForm.username"
            placeholder="你的手机号"
            name="username"
            type="text"
            tabindex="1"
            autocomplete="on"
          >
            <span slot="prefix" class="login-icon-common"><a-icon type="user"/></span>
          </a-input>
        </a-form-model-item>

        <a-tooltip v-model="capsTooltip" content="大小写锁定开关打开" placement="right" manual>
          <a-form-model-item prop="password">
            <a-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="你的密码"
              name="password"
              tabindex="2"
              autocomplete="on"
              @keyup.native="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter.native="handleLogin"
            >
              <span slot="prefix" class="login-icon-common"><a-icon type="lock"/></span>
              <span slot="suffix" class="login-icon-common" @click="showPwd">
                <a-icon :type="passwordType === 'password' ? 'eye-invisible' : 'eye'"/>
              </span>
            </a-input>

          </a-form-model-item>
        </a-tooltip>
        <div class="login-optional">
          <div class="remember-me">
            <!--                    <a-checkbox v-model="rememberMe" style="margin-right:4px;"/>-->
            <!--                    记住登陆-->
          </div>
          <!--                  <div class="forget" @click="resetPassword=true">-->
          <div class="forget" @click="resetPassword=true">
            忘记密码？
          </div>
        </div>
        <b-button
          :loading="loading"
          :block="true"
          style="margin:18px 0 42px;height: 48px"
          @click.native.prevent="handleLogin"
          btnContent="登录"/>
        <!--        <div class="go-to-registry" @click="registryModeOn=true">-->
        <div class="go-to-registry">
          <div>还没有账号？<span class="link-text" @click="registryModeOn=true">快速注册</span></div>
          <div style="margin-top: 15px">登录即代表同意协议《<span class="link-text" @click="protocolVisible=true">必火互动协议</span>》
          </div>
        </div>
      </a-form-model>
      <!--找回密码弹窗-->
      <a-form-model
        ref="resetPasswordForm"
        :model="registryForm"
        :rules="registryRules"
        class="registry-form"
        :class="{hide: !resetPassword}"
        labelAlign="left">
        <div class="title-container" style="margin-bottom: 8px;">
          找回密码
        </div>

        <a-form-model-item prop="phone">
          <a-input
            ref="phone"
            v-model="registryForm.phone"
            placeholder="您的手机号"
            name="phone"
            type="text"
            tabindex="3"
            autocomplete="on"
          >
            <span slot="prefix" class="login-icon-common"><a-icon type="phone"/></span>
          </a-input>
        </a-form-model-item>

        <a-tooltip v-model="capsTooltip" content="大小写锁定开关打开" placement="right" manual>
          <a-form-item prop="password">
            <a-input
              :key="passwordType"
              ref="password"
              v-model="registryForm.password"
              :type="passwordType"
              placeholder="你的密码（长度6-20位字母和数字）"
              name="password"
              tabindex="4"
              autocomplete="on"
              @keyup.native="checkCapslock"
              @blur="capsTooltip = false"
            >
              <span slot="prefix" class="login-icon-common"><a-icon type="lock"/></span>
              <span slot="suffix" class="login-icon-common" @click="showPwd">
                <a-icon :type="passwordType === 'password' ? 'eye-invisible' : 'eye'"/>
              </span>
            </a-input>
          </a-form-item>
        </a-tooltip>
        <a-form-model-item prop="captcha">
          <a-input
            ref="captcha"
            v-model="registryForm.captcha"
            placeholder="验证码"
            name="captcha"
            type="text"
            tabindex="5"
            autocomplete="on"
            style="width: 200px"
          >
            <span slot="prefix" class="login-icon-common"><a-icon type="key"/></span>

          </a-input>
          <span
            class="send-captcha"
            style="cursor: pointer;"
            v-if="sendCount<=0"
            @click="onGetVerifiedCode">获取验证码</span>
          <span v-if="sendCount>0" class="send-captcha" style="color:#ccc;">重新发送({{ 60-sendCount }}s)</span>

        </a-form-model-item>
        <a-button
          :loading="loading"
          type="primary"
          style="width:100%;margin: 16px 0;"
          @click.native.prevent="onResetPassword">确认
        </a-button>

        <div class="go-to-registry" @click="resetPassword=false">
          <span>去登陆</span>
        </div>
      </a-form-model>
      <!--      注册弹窗-->
      <a-form-model
        ref="registryForm"
        :model="registryForm"
        :rules="registryRules"
        class="registry-form"
        :class="{hide: !registryModeOn}"
        autocomplete="on"
        label-position="left">
        <div class="title-container" style="margin-bottom: 8px;">
          快速注册
        </div>

        <a-form-model-item prop="phone">
          <a-input
            ref="phone"
            v-model="registryForm.phone"
            placeholder="您的手机号"
            name="phone"
            type="text"
            tabindex="3"
            autocomplete="on"
          >
            <span slot="prefix" class="login-icon-common"><a-icon type="phone"/></span>
          </a-input>
        </a-form-model-item>

        <a-tooltip v-model="capsTooltip" content="大小写锁定开关打开" placement="right" manual>
          <a-form-item prop="password">
            <a-input
              :key="passwordType"
              ref="password"
              v-model="registryForm.password"
              :type="passwordType"
              placeholder="你的密码（长度6-20位字母和数字）"
              name="password"
              tabindex="4"
              autocomplete="on"
              @keyup.native="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter.native="handleLogin"
            >
              <span slot="prefix" class="login-icon-common"><a-icon type="lock"/></span>
              <span slot="suffix" class="login-icon-common" @click="showPwd">
                <a-icon :type="passwordType === 'password' ? 'eye-invisible' : 'eye'"/>
              </span>
            </a-input>
          </a-form-item>
        </a-tooltip>
        <a-form-item prop="captcha">
          <a-input
            ref="captcha"
            v-model="registryForm.captcha"
            placeholder="验证码"
            name="captcha"
            type="text"
            tabindex="5"
            autocomplete="on"
            style="width: 200px"
          >
            <span slot="prefix" class="login-icon-common"><a-icon type="key"/></span>
          </a-input>
          <span
            class="send-captcha"
            style="cursor: pointer;"
            v-if="sendCount<=0"
            @click="onGetVerifiedCode">获取验证码</span>
          <span v-if="sendCount>0" class="send-captcha" style="color:#ccc;">重新发送({{ 60-sendCount }}s)</span>
        </a-form-item>
        <div class="registry-optional">
          <a-checkbox v-model="checkedProtocol"/>
          <span>&nbsp;&nbsp;同意<span class="link-text" @click="protocolVisible=true">《必火互动用户使用协议》</span></span>
        </div>
        <a-button
          :loading="loading"
          type="primary"
          style="width:100%;margin: 16px 0;"
          @click.native.prevent="onRegister">注册
        </a-button>

        <div class="go-to-registry" @click="registryModeOn=false">
          已有账号，<span>去登陆</span>
        </div>
      </a-form-model>
    </div>
    <div class="copyright">
      晨智信息科技 版权所有 CopyRights © 2013-2019 All rights reserved
    </div>
    <a-modal
      v-model="protocolVisible"
      title="《必火互动用户使用协议》"
      :closable="false"
      @ok="protocolVisible=false"
      width="80%"
      okText="确定">
      <pre class="protocol-content-rich-text">
一、总则须知
1.1 必火互动的所有权和运营权归长沙晨智信息科技有限公司（以下简称“晨智科技”）所有。
1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与必火互动之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。
1.3 本协议则可由必火互动随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似内容是本协议的一部分。

二、服务内容
2.1 必火互动的具体内容由本站根据实际情况提供。
2.2 本站仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)均应由用户自行负担。

三、用户帐号
3.1 用户只能按照注册要求使用真实手机号、机构名字注册。用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。

四、使用规则
4.1 遵守中华人民共和国相关法律法规，包括但不限于《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》、《最高人民法院关于审理涉及计算机网络著作权纠纷案件适用法律若干问题的解释(法释[2004]1号)》、《全国人大常委会关于维护互联网安全的决定》、《互联网电子公告服务管理规定》、《互联网新闻信息服务管理规定》、《互联网著作权行政保护办法》和《信息网络传播权保护条例》等有关计算机互联网规定和知识产权的法律和法规、实施办法。
4.2 用户对其自行发表、上传或传送的内容负全部责任，所有用户不得在本站任何页面发布、转载、传送含有下列内容之一的信息，否则本站有权自行处理并不通知用户：
(1)违反宪法确定的基本原则的；
(2)危害国家安全，泄漏国家机密，颠覆国家政权，破坏国家统一的；
(3)损害国家荣誉和利益的；
(4)煽动民族仇恨、民族歧视，破坏民族团结的；
(5)破坏国家宗教政策，宣扬邪教和封建迷信的；
(6)散布谣言，扰乱社会秩序，破坏社会稳定的；
(7)散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；
(8)侮辱或者诽谤他人，侵害他人合法权益的；
(9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；
(10)以非法民间组织名义活动的；
(11)含有法律、行政法规禁止的其他内容的。
(12)帐号一但涉黄有权不通知用户删除帐号!并不退款!
4.3 用户承诺对其发表或者上传于本站的所有信息(即属于《中华人民共和国著作权法》规定的作品，包括但不限于文字、图片、音乐、电影、表演和录音录像制品和电脑程序等)均享有完整的知识产权，或者已经得到相关权利人的合法授权；如用户违反本条规定造成本站被第三人索赔的，用户应全额补偿本站一切费用(包括但不限于各种赔偿费、诉讼代理费及为此支出的其它合理费用)；
4.4 当第三方认为用户发表或者上传于本站的信息侵犯其权利，并根据《信息网络传播权保护条例》或者相关法律规定向本站发送权利通知书时，用户同意本站可以自行判断决定删除涉嫌侵权信息，除非用户提交书面证据材料排除侵权的可能性，本站将不会自动恢复上述删除的信息；
(1)不得为任何非法目的而使用网络服务系统；
(2)遵守所有与网络服务有关的网络协议、规定和程序；
(3)不得利用本站进行任何可能对互联网的正常运转造成不利影响的行为；
(4)不得利用本站进行任何不利于本站的行为。
4.5 如用户在使用网络服务时违反上述任何规定，本站有权要求用户改正或直接采取一切必要的措施(包括但不限于删除用户张贴的内容、暂停或终止用户使用网络服务的权利)以减轻用户不当行为而造成的影响。

五、隐私保护
5.1 本站不对外公开或向第三方提供单个用户的注册资料及用户在使用网络服务时存储在本站的非公开内容，但下列情况除外：
(1)事先获得用户的明确授权；
(2)根据有关的法律法规要求；
(3)按照相关政府主管部门的要求；
(4)为维护社会公众的利益。
5.2 本站可能会与第三方合作向用户提供相关的网络服务，在此情况下，如该第三方同意承担与本站同等的保护用户隐私的责任，则本站有权将用户的注册资料等提供给该第三方。

5.3 在不透露单个用户隐私资料的前提下，本站有权对整个用户数据库进行分析并对用户数据库进行商业上的利用。

六、版权声明
6.1 本站的文字、图片、音频、视频等版权均归晨智科技享有或与作者共同享有，未经本站许可，不得任意转载。
6.2 本站特有的标识、版面设计、编排方式等版权均属晨智科技享有，未经本站许可，不得任意复制或转载。
6.3 使用本站的任何内容均应注明“来源于必火互动”及署上作者姓名，按法律规定需要支付稿酬的，应当通知本站及作者及支付稿酬，并独立承担一切法律责任。
6.4 本站享有所有作品用于其它用途的优先权，包括但不限于网站、电子杂志、平面出版等，但在使用前会通知作者，并按同行业的标准支付稿酬。
6.5 本站所有内容仅代表作者自己的立场和观点，与本站无关，由作者本人承担一切法律责任。
6.6 恶意转载本站内容的，本站保留将其诉诸法律的权利。
七、责任声明
7.1 用户明确同意其使用本站网络服务所存在的风险及一切后果将完全由用户本人承担，必火互动对此不承担任何责任。
7.2 本站无法保证网络服务一定能满足用户的要求，也不保证网络服务的及时性、安全性、准确性。
7.3 本站不保证为方便用户而设置的外部链接的准确性和完整性，同时，对于该等外部链接指向的不由本站实际控制的任何网页上的内容，本站不承担任何责任。
7.4 对于因不可抗力或本站不能控制的原因造成的网络服务中断或其它缺陷，本站不承担任何责任，但将尽力减少因此而给用户造成的损失和影响。
7.5 对于站向用户提供的下列产品或者服务的质量缺陷本身及其引发的任何损失，本站无需承担任何责任：
7.6 因用户活动（或页面连接）被多人恶意举报（或者分享频次超过微信的限制）导致被微信屏蔽或无法在朋友圈传播的，本平台不承担任何责任 ，本平台只为用户申请解封提供帮助！
7.7 因用户做的活动或者发布的内容不符合腾讯政策，导致公众帐号被腾讯封杀的，本平台不承担任何责任！
        </pre>
      <template slot="footer">
        <a-button type="primary" @click="protocolVisible=false">确认</a-button>
      </template>
    </a-modal>

  </div>
</template>

<script>
  import { timeFix } from '@/utils/util'
  import { mapActions } from 'vuex'
  import { Register, sendRegisterSms, sendResetPwdSms, resetPass } from '../../../api/login'

  export default {
    name: 'Login',
    data () {
      const validateRegistryPassword = (rule, value, callback) => {
        if (value.trim().length !== value.length) {
          callback(new Error('密码不能包含空格'))
        } else if (value.length < 6 || value.length > 20) {
          callback(new Error('密码必须大于6位小于20位'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.trim().length !== value.length) {
          callback(new Error('密码不能包含空格'))
        } else if (value.trim().length === 0) {
          callback(new Error('密码不能为空'))
        } else {
          callback()
        }
      }
      const validateUsername = (rule, value, callback) => {
        if (value.trim().length === 0) {
          callback(new Error('账户不能为空'))
        } else {
          callback()
        }
      }
      return {
        // logoImg,
        resetPassword: false,
        isSendingCode: false,
        checkedProtocol: false,
        countdown: 0,
        loginForm: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{
            required: true,
            trigger: 'blur',
            validator: this.registryModeOn ? validateRegistryPassword : validatePassword
          }]
        },
        passwordType: 'password',
        capsTooltip: false,
        loading: false,
        showDialog: false,
        redirect: null,
        otherQuery: {},
        registryModeOn: false,
        registryForm: {
          email: '',
          phone: '',
          password: '',
          valid: '',
          checked: false
        },
        registryRules: {
          // email: [{ required: true, validator: checkEmail, trigger: 'blur' }],
          // phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
          // captcha: [{ required: true, validator: checkcaptcha, trigger: 'blur' }],
          // password: [{ required: true, trigger: 'blur', validator: validatePassword }]
        },
        protocolVisible: false,
        rememberMe: false,
        sendCount: 0,
        timer: 0
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          const query = route.query
          if (query) {
            this.redirect = query.redirect
            this.otherQuery = this.getOtherQuery(query)
          }
        },
        immediate: true
      },
      // 改变号码的时候重置验证码方法
      'registryForm.phone': function () {
        this.resetCountdown()
      }
    },
    mounted () {
      if (this.loginForm.username === '') {
        this.$refs.username.focus()
      } else if (this.loginForm.password === '') {
        this.$refs.password.focus()
      }
      // 加载登陆状态
      // this.rememberMe = Auth.getRememberState()
    },
    destroyed () {
      // 离开前清除计时器
      this.resetCountdown()
    },
    methods: {
      ...mapActions(['Login', 'Logout']),
      validatePhone (phone) {
        const reg = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
        return reg.test(phone)
      },
      onGetVerifiedCode () {
        if (this.isSendingCode) {
          return
        }
        if (!this.registryForm.phone || !this.validatePhone(this.registryForm.phone)) {
          this.$message.error('请输入正确的手机号码')
          return
        }
        this.isSendingCode = true
        this.startCountdown()
        if (this.resetPassword) {
          this.doSendCodeResetPassword()
        }
        if (this.registryModeOn) {
          this.doSendCodeRegistryModeOn()
        }
      },
      startTime () {
        this.sendCount++
        // console.log(new Date().getTime());
        if (this.sendCount >= 60) {
          this.resetCountdown()
        }
      },
      startCountdown () {
        this.startTime()
        this.timer = setInterval(() => {
          // Interval是先等待后执行，所以想要不延迟执行，先执行一遍
          this.startTime()
        }, 1000)
      },
      resetCountdown () {
        this.isSendingCode = false
        this.sendCount = 0
        clearInterval(this.timer)
      },
      doSendCodeResetPassword () {
        sendResetPwdSms({ phone: this.registryForm.phone }).then(res => {
          this.$message.success(`发送成功`)
        }).catch(() => {
          this.resetCountdown()
        })
      },
      doSendCodeRegistryModeOn () {
        sendRegisterSms({ phone: this.registryForm.phone }).then(res => {
          this.$message.success(`发送成功`)
        }).catch(() => {
          this.resetCountdown()
        })
      },
      checkCapslock ({ shiftKey, key } = {}) {
        if (key && key.length === 1) {
          if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
            this.capsTooltip = true
          } else {
            this.capsTooltip = false
          }
        }
        if (key === 'CapsLock' && this.capsTooltip === true) {
          this.capsTooltip = false
        }
      },
      showPwd () {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      onResetPassword () {
        const tempPassword = this.registryForm.password
        if (tempPassword.trim().length !== tempPassword.length) {
          this.$message.warning(`密码不能包含空格`)
          return
        }
        this.loading = true
        resetPass({
          phone: this.registryForm.phone.trim(),
          password: this.registryForm.password.trim(),
          captcha: this.registryForm.captcha.trim()
        }).then(() => {
          this.resetPassword = false
          this.loading = false
          this.registryForm = {
            email: '',
            phone: '',
            password: '',
            valid: '',
            checked: false
          }
          this.$message.success(`密码修改成功，请重新登录`)
        }).catch(() => {
          this.loading = false
        })
      },
      onRegister () {
        if (!this.checkedProtocol) {
          this.$message.warning(`请先同意必火互动用户使用协议`)
          return
        }
        const tempPassword = this.registryForm.password
        if (tempPassword.trim().length !== tempPassword.length) {
          this.$message.error('密码不能包含空格')
          return
        }
        this.$refs.registryForm.validate(valid => {
          if (valid) {
            this.loading = true
            Register({
              phone: this.registryForm.phone.trim(),
              password: this.registryForm.password.trim(),
              captcha: this.registryForm.captcha.trim()
            })
              .then(() => {
                this.loading = false
                this.$message.success(`注册成功,跳转登录页`)
                this.registryModeOn = false
                this.registryForm = {
                  email: '',
                  phone: '',
                  password: '',
                  valid: '',
                  checked: false
                }
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            return false
          }
        })
      },
      handleLogin () {
        this.loading = true
        const {
          Login
        } = this
        const self = this
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            Login(this.loginForm)
              .then((res) => this.loginSuccess(res))
              .catch(err => this.requestFailed(err))
              .finally(() => {
                // state.loginBtn = false
                self.loading = false
              })
          } else {
            this.loading = false
            console.log('error submit!!')
            return false
          }
        })
      },
      loginSuccess (res) {
        this.$router.push({ path: '/dashboard' })
        // 延迟 1 秒显示欢迎信息
        setTimeout(() => {
          this.$message.success(`${timeFix()}，欢迎回来`)
        }, 1000)
        // this.isLoginError = false
      },
      requestFailed () {
        // this.$notification['error']({
        //   message: '错误',
        //   description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        //   duration: 4
        // })
      },
      getOtherQuery (query) {

      }
    }
  }
</script>

<style lang="less">
  /* reset element-ui css */
  .login-container {
    position: relative;

    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 12px 5px 12px 15px;
        color: #363636;
        height: 47px;
        caret-color: green;
        font-size: 16px;

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px #BFBFBF inset !important;
          -webkit-text-fill-color: green !important;
        }
      }
    }

    .a-form-model-item {
      border-bottom: 1px solid #e6e6e6;
      color: #454545;
    }
  }

  .login-container {
    height: 100%;
    width: 100%;
    min-height: 700px;
    background-color: @bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo-image {
      width: 285px;
      height: 69px;
    }

    .logo-tip {
      margin-top: 10px;
      height: 27px;
      line-height: 1;
      font-size: 18px;
      color: #8C8C8C;
    }

    .mid-card {
      margin-top: 42px;
      min-width: 800px;
      height: 500px;
      line-height: 20px;
      display: flex;
      border-radius: 10px;
      box-shadow: 0 2px 22px 0 rgb(234, 234, 234);
      background: #fff;
      color: #283542;
      overflow: hidden;
    }

    .left-red {
      flex-shrink: 0;
      min-width: 360px;
      height: 100%;
      background: #C03639;
      transition: 0.2s;

      .logo-left-image {
        width: 360px;
        height: 500px;
      }

      &.hide {
        width: 0;
        padding: 0;
      }
    }

    .login-form {
      flex-shrink: 0;
      position: relative;
      width: 440px;
      height: 100%;
      padding: 60px;
      overflow: hidden;
      transition: 0.2s;

      &.hide {
        width: 0;
        padding: 0;
      }
    }

    .registry-form {
      flex-shrink: 0;
      width: 440px;
      height: 100%;
      padding: 40px 60px;
      transition: 0.2s;
      overflow: hidden;

      &.hide {
        width: 0;
        padding: 0;
      }
    }

    .login-optional {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #a6a6a6;

      .remember-me {
        display: flex;
        align-items: center;
      }

      .forget {
        cursor: pointer;
      }
    }

    .go-to-registry {
      font-size: 14px;
      text-align: center;
      cursor: pointer;

      > span {
        color: #378bfb;
      }
    }

    .title-container {
      margin: 0 auto 24px;
      width: 100%;
      color: #333333;
      font-size: 20px;
      text-align: center;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: @dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .login-icon-common {
      font-size: 16px;
      color: @dark_gray;
      cursor: pointer;
      user-select: none;
    }

    @media only screen and (max-width: 800px) {
      .left-red {
        width: 0
      }
    }

    .copyright {
      margin-top: 67px;
      width: 100%;
      text-align: center;
      color: #a6a6a6;
      font-size: 14px;
    }

    .registry-optional {
      font-size: 14px;
      cursor: pointer;
    }

    .send-captcha {
      margin-left: 10px;
      width: 70px;
      text-align: center;
    }

    .protocol-content-rich-text {
      color: #929292;
      white-space: pre-wrap;
    }

    .link-text {
      cursor: pointer;
      color: #378BFB;
    }
  }
</style>
